<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <link rel="stylesheet" href="/dist/css/AdminLTE.css">
    <link rel="stylesheet" href="/dist/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/plugins/zTree/metroStyle/metroStyle.css">
</head>

<div class="diy_table_panel">
    <div class="diy_table_head">
        <form class="row">
            <input type="hidden" name="pageSize" value="20">
            <input type="hidden" name="pageCurrent" value="10">
            <div class="col-xs-4">
                <div class="input-group">
                    <span class="input-group-addon">用户名</span>
                    <input name="username" class="form-control">
                </div>
            </div>
            <div class="col-xs-4">
                <div class="input-group">
                    <span class="input-group-addon">E-mail</span>
                    <input name="email" class="form-control">
                </div>
            </div>
            <div class="col-xs-4">
                <button type="submit" class="btn btn-primary">搜索</button>
            </div>
        </form>
    </div>
    <ul id="treeDemo" class="ztree" style="height: 400px; width:400px;"></ul>
    <button id="value" style="width: 100px">当前值</button>
</div>
<script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="/plugins/zTree/jquery.ztree.all.js"></script>
<script>

    $(function () {
        $.ajax({
            url: "/tree",
            dataType: "json",
            success: function (d) {
                if (!d) alert('没有数据');
                var data = d.nodes;
            }
        });
        var zTreeObj;
        // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
        var setting = {};
        // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
        var zNodes = [
            {
                name: "test1", open: true, children: [
                {name: "test1_1"}, {name: "test1_2"}]
            },
            {
                name: "test2", open: true, children: [
                {name: "test2_1"}, {name: "test2_2"}]
            }
        ];

        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    })

</script>
</html>